<template>
	<view class="v-header-navigation-bar" :style="{ backgroundColor: backgroundColor }">
		<view class="v-header-navigation-bar-left" @click="handleBack">
			<slot name="left">
				<view class="v-header-navigation-bar-back-icon" v-if="showBack"></view>
			</slot>
		</view>
		<view class="v-header-navigation-bar-title">
			<slot>
				<text>{{ title }}</text>
			</slot>
		</view>
		<view class="v-header-navigation-bar-right">
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref,inject } from 'vue';

/**
 * v-header-navigation-bar 导航栏
 * title    标题
 * backgroundColor    背景颜色
 * showBack            是否需要返回按钮
 */
const props = defineProps({
	title: {
		type: String,
		default: ''
	},
	backgroundColor: {
		type: String,
		default: '#ffffff'
	},
	showBack: {
		type: Boolean,
		default: true
	}
});

const emits = defineEmits(['back']);

const config = inject<any>('config');
const handleBack = () => {
	if (props.showBack) {
		emits('back');
	}
};
</script>

<style lang="scss" scoped>
.v-header-navigation-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10rpx 16rpx;
	box-sizing: border-box;
	height: 5vh;
	border-bottom: 1px solid v-bind("config.border.color");
	position: relative;
	z-index: 1000;
}
.v-header-navigation-bar-left {
	margin-left: 2%;
}
.v-header-navigation-bar-left,
.v-header-navigation-bar-right {
	display: flex;
	align-items: center;
}

.v-header-navigation-bar-back-icon {
	width: 24rpx;
	height: 24rpx;
	border: 4rpx solid v-bind("config.fontColor.mianTitle");
	border-top: none;
	border-right: none;
	transform: rotate(45deg);
	margin-right: 10px;
	cursor: pointer;
}

.v-header-navigation-bar-title {
	flex: 1;
	text-align: center;
	font-size: v-bind("config.fontSize.mediumTitle");
	font-weight: bold;
	color: v-bind("config.fontColor.mianTitle");
}
</style>
